<template>
    <el-table-column align="center" v-bind="filterProps(props, 'Slots', 'DateFormat', 'Children')">
        <template v-if="props.Slots?.header" #header="{ column, $index }">
            <slot :name="props.Slots.header" :column="column" :$index="$index"></slot>
        </template>
        <template v-if="props.Slots?.default" #default="{ row, column, $index }">
            <slot :name="props.Slots.default" :row="row" :column="column" :$index="$index"></slot>
        </template>
        <template v-else-if="props.DateFormat" #default="{ row }">
            {{ ParseDate(row[props.prop]) }}
        </template>

        <MyTableColumn v-if="props.Children?.length" v-for="col in props.Children" :props="col">
            <!-- 中转当前递归插槽 传送给当前组件 MyTable 父组件 -->
            <template v-for="slot in Object.keys($slots)" #[slot]="{ row, column, $index }">
                <slot :name="slot" :row="row" :column="column" :$index="$index"></slot>
            </template>
        </MyTableColumn>
    </el-table-column>
</template>

<script setup lang="ts">
import type { ColumnsType } from "../MyTable"
import MyTableColumn from "@/components/MyTable/MyTableColumn/Index.vue";
import { ParseDate } from "@/library/utils/tools"

defineOptions({
    name: "MyTableColumn"
})

defineProps<{
    props: ColumnsType
}>()

/** 过滤不绑定的属性 */
const filterProps = ((obj: ColumnsType, ...keys: Array<keyof ColumnsType>) => {
    if (!keys.length) { return obj }

    const newObj = { ...obj };

    keys.forEach(key => {
        delete newObj[key];
    });

    return newObj;
})

</script>

<style lang="scss"></style>